<template>
	<view>
		<div id="container"></div>
		<div id="container1"></div>
		<template v-if="isImgShow">
			<image src="../../static/logo/logo.png"  style="display: none;" @load="Highcharts.onClick" :data-option="optin" mode=""></image>
			<image src="../../static/logo/logo.png" style="display: none;" @load="Highcharts.onClick1" :data-option="optin1" mode=""></image>
		</template>
		
	</view>
</template>


<script module="Highcharts" lang="renderjs">
	let Highchart = {};
	let number = 0;
	export default {
		data() {
			return {
				highOpt: {
					chart: {
						zoomType: 'x'
					},
					title: {
						text: '美元兑欧元汇率走势图'
					},
					subtitle: {
						text: document.ontouchstart === undefined ?
							'鼠标拖动可以进行缩放' : '手势操作进行缩放'
					},
					xAxis: {
						type: 'datetime',
						dateTimeLabelFormats: {
							millisecond: '%H:%M:%S.%L',
							second: '%H:%M:%S',
							minute: '%H:%M',
							hour: '%H:%M',
							day: '%m-%d',
							week: '%m-%d',
							month: '%Y-%m',
							year: '%Y'
						}
					},
					tooltip: {
						dateTimeLabelFormats: {
							millisecond: '%H:%M:%S.%L',
							second: '%H:%M:%S',
							minute: '%H:%M',
							hour: '%H:%M',
							day: '%Y-%m-%d',
							week: '%m-%d',
							month: '%Y-%m',
							year: '%Y'
						}
					},
					yAxis: {
						title: {
							text: '汇率'
						}
					},
					legend: {
						enabled: false
					},
					plotOptions: {
						area: {
							fillColor: {
								linearGradient: {
									x1: 0,
									y1: 0,
									x2: 0,
									y2: 1
								},
								stops: []
							},
							marker: {
								radius: 2
							},
							lineWidth: 1,
							states: {
								hover: {
									lineWidth: 1
								}
							},
							threshold: null
						}
					},
					series: [{
						type: 'area',
						name: '美元兑欧元',
						data: []
					}]
				},
				seriesData: [],
				isLoad: false
			}
		},
		watch: {
			seriesData(n) {
				if (n.length) {
					this.highOpt.series[0].data = n;
					this.initEcharts1()
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.isLoadHighCharts()
			})
		},

		methods: {
			isLoadHighCharts(){
				if (window.Highcharts) {
					this.initEcharts()
				} else {
					const script = document.createElement('script')
					script.src = 'http://cdn.highcharts.com.cn/highcharts/highcharts.js'
					document.head.appendChild(script)
				}
			},
			initEcharts() {
				if (Highcharts) {
					Highchart.container = Highcharts.chart('container', this.options);
				}
			},
			initEcharts1() {
				let interval = setInterval(() => {
					if (Highcharts || number > 20) {
						clearInterval(interval);
						if (!Highcharts) return
						if (!this.highOpt.plotOptions.area.fillColor.stops.length) {
							let stops = [
								[0, new Highcharts.getOptions().colors[0]],
								[1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
							]
							this.highOpt.plotOptions.area.fillColor.stops = stops;
						}
						Highchart.container1 = Highcharts.chart('container1', this.highOpt);
					} else {
						number++
					}
				}, 500)

			},
			loads() {
				console.log('loads')
			},
			onClick(e) {
				let optionJson = e.currentTarget.dataset.option;
				// #ifdef H5
				this.options = JSON.parse(optionJson)
				// #endif
				// #ifndef H5
				this.options = JSON.parse(JSON.parse(optionJson))
				// #endif
				if (window.Highcharts) {
					this.initEcharts()
				}else{
					this.isLoadHighCharts()
				}
			},
			onClick1(e) {
				let optionJson = e.currentTarget.dataset.option;
				// #ifdef H5
				this.seriesData = JSON.parse(optionJson)
				// #endif
				// #ifndef H5
				this.seriesData = JSON.parse(JSON.parse(optionJson))
				// #endif
			}
		}
	}
</script>


<script>
	let HighchartsOption = {
		gridLineWidth: 1,
		minTickInterval: 1,
		lineWidth: 1,
		lineColor: '#000000',
		minorGridLineDashStyle: 'dash',
		minorTickInterval: 'auto',
		minorTickWidth: 1,
		minorGridLineWidth: 0,
		tickLength: 0,
		allowDecimals: true,
		tickAmount: 5

	}

	export default {
		data() {
			return {
				isImgShow: false,
				opt: {
					title: {
						text: ''
					},
					legend: {
						enabled: false
					},
					credits: {
						enabled: false
					},
					xAxis: [{
							...HighchartsOption,
							title: {
								enabled: false
							}
						},
						{
							...HighchartsOption,
							labels: {
								enabled: false
							},
							title: {
								enabled: false
							},
							opposite: true
						}
					],
					yAxis: [{
							...HighchartsOption,
							title: {
								enabled: false
							}
						},
						{
							...HighchartsOption,
							labels: {
								enabled: false
							},
							title: {
								enabled: false
							},
							opposite: true
						}
					],
					series: [{
						name: '观测值',
						type: 'scatter',
						color: 'rgba(255,68,85,0.6)',
						data: [{
								name: '2019-9-9',
								x: 5,
								y: 6
							},
							{
								name: '2019-9-10',
								x: 6,
								y: 5
							},
							{
								name: '2019-9-11',
								x: 7,
								y: 4
							},
							{
								name: '2019-9-12',
								x: 8,
								y: 3
							},
						]
					}],
					tooltip: {
						headerFormat: '<b>{point.key}</b><br>',
						pointFormat: '防御能力:{point.x} , 进攻能力:{point.y}'
					}
				},
				opt1: [
					[1370131200000, 0.7695],
					[1370217600000, 0.7648],
					[1370304000000, 0.7645],
					[1370390400000, 0.7638],
					[1370476800000, 0.7549],
					[1370563200000, 0.7562],
					[1370736000000, 0.7574],
					[1370822400000, 0.7543],
					[1370908800000, 0.751],
					[1370995200000, 0.7498],
					[1371081600000, 0.7477],
					[1371168000000, 0.7492],
					[1371340800000, 0.7487],
					[1371427200000, 0.748],
					[1371513600000, 0.7466],
					[1371600000000, 0.7521],
					[1371686400000, 0.7564],
					[1371772800000, 0.7621],
					[1371945600000, 0.763],
					[1372032000000, 0.7623],
					[1372118400000, 0.7644],
					[1372204800000, 0.7685],
					[1372291200000, 0.7671],
					[1372377600000, 0.7687],
					[1372550400000, 0.7687],
					[1372636800000, 0.7654],
					[1372723200000, 0.7705],
					[1372809600000, 0.7687],
					[1372896000000, 0.7744],
					[1372982400000, 0.7793],
					[1373155200000, 0.7804],
					[1373241600000, 0.777],
					[1373328000000, 0.7824],
					[1373414400000, 0.7705],
					[1373500800000, 0.7635],
					[1373587200000, 0.7652],
					[1373760000000, 0.7656],
					[1373846400000, 0.7655],
					[1373932800000, 0.7598],
					[1374019200000, 0.7619],
					[1374105600000, 0.7628],
					[1374192000000, 0.7609],
					[1374364800000, 0.7599],
					[1374451200000, 0.7584],
					[1374537600000, 0.7562],
					[1374624000000, 0.7575],
					[1374710400000, 0.7531],
					[1374796800000, 0.753],
					[1374969600000, 0.7526],
					[1375056000000, 0.754],
					[1375142400000, 0.754],
					[1375228800000, 0.7518],
					[1375315200000, 0.7571],
					[1375401600000, 0.7529],
					[1375574400000, 0.7532],
					[1375660800000, 0.7542],
					[1375747200000, 0.7515],
					[1375833600000, 0.7498],
					[1375920000000, 0.7473],
					[1376006400000, 0.7494],
					[1376179200000, 0.7497],
					[1376265600000, 0.7519],
					[1376352000000, 0.754],
					[1376438400000, 0.7543],
					[1376524800000, 0.7492],
					[1376611200000, 0.7502],
					[1376784000000, 0.7503],
					[1376870400000, 0.7499],
					[1376956800000, 0.7453],
					[1377043200000, 0.7487],
					[1377129600000, 0.7487],
					[1377216000000, 0.7472],
					[1377388800000, 0.7471],
					[1377475200000, 0.748],
					[1377561600000, 0.7467],
					[1377648000000, 0.7497],
					[1377734400000, 0.7552],
					[1377820800000, 0.7562],
					[1377993600000, 0.7572],
					[1378080000000, 0.7581],
					[1378166400000, 0.7593],
					[1378252800000, 0.7571],
					[1378339200000, 0.7622],
					[1378425600000, 0.7588],
					[1378598400000, 0.7591],
					[1378684800000, 0.7544],
					[1378771200000, 0.7537],
					[1378857600000, 0.7512],
					[1378944000000, 0.7519],
					[1379030400000, 0.7522],
					[1379203200000, 0.7486],
					[1379289600000, 0.75],
					[1379376000000, 0.7486],
					[1379462400000, 0.7396],
					[1379548800000, 0.7391],
					[1379635200000, 0.7394],
					[1379808000000, 0.7389],
					[1379894400000, 0.7411],
					[1379980800000, 0.7422],
					[1380067200000, 0.7393],
					[1380153600000, 0.7413],
					[1380240000000, 0.7396],
					[1380412800000, 0.741],
					[1380499200000, 0.7393],
					[1380585600000, 0.7393],
					[1380672000000, 0.7365],
					[1380758400000, 0.7343],
					[1380844800000, 0.7376],
					[1381017600000, 0.737],
					[1381104000000, 0.7362],
					[1381190400000, 0.7368],
					[1381276800000, 0.7393],
					[1381363200000, 0.7397],
					[1381449600000, 0.7385],
					[1381622400000, 0.7377],
					[1381708800000, 0.7374],
					[1381795200000, 0.7395],
					[1381881600000, 0.7389],
					[1381968000000, 0.7312],
					[1382054400000, 0.7307],
					[1382227200000, 0.7309],
					[1382313600000, 0.7308],
					[1382400000000, 0.7256],
					[1382486400000, 0.7258],
					[1382572800000, 0.7247],
					[1382659200000, 0.7244],
					[1382832000000, 0.7244],
					[1382918400000, 0.7255],
					[1383004800000, 0.7275],
					[1383091200000, 0.728],
					[1383177600000, 0.7361],
					[1383264000000, 0.7415],
					[1383436800000, 0.7411],
					[1383523200000, 0.7399]				]
			}
		},
		computed: {
			optin() {
				return JSON.stringify(this.opt)
			},
			optin1() {
				return JSON.stringify(this.opt1)
			}
		},
		onReady() {
			setTimeout(() => {
				this.isImgShow = true;
			}, 500)
		}
	}
</script>


<style lang="scss">
	.highcharts-container {
		width: 750rpx;
		height: 600rpx;
	}

	#container,
	#container1{
		width: 100%;
		height: 500rpx;
	}
	.highcharts-credits{
		display: none !important;
	}
</style>
